<template>
  <div class="shop">
    <NuxtLink
      v-for="item in storeList"
      :key="item.id"
      :to="localePath(`/shopdetail/${item.id}`)"
      class="shop-card"
    >
      <v-card elevation="2">
        <v-card-title>
          <h1 style="font-size: 1.25rem">{{ item.name }}</h1>
        </v-card-title>
        <v-card-text>
          <div class="desc">
            <div class="desc-label">{{ $t('storeaddress') }}:</div>
            <div class="desc-value">{{ item.address }}</div>
          </div>
          <div class="desc">
            <div class="desc-label">{{ $t('onlinetime') }}:</div>
            <div class="desc-value">
              {{ item.business_start && item.business_start.toString().padStart(2, '0') }} :00 -
              {{ item.business_end && item.business_end.toString().padStart(2, '0') }} : 00
            </div>
          </div>
          <div class="desc">
            <div class="desc-label">{{ $t('contract') }}:</div>
            <div class="desc-value">{{ item.contacts }}</div>
          </div>
          <div class="desc">
            <div class="desc-label">{{ $t('phone') }}:</div>
            <div class="desc-value">{{ item.phone }}</div>
          </div>
          <div class="desc">
            <div class="desc-label">{{ $t('eamil') }}:</div>
            <div class="desc-value">{{ item.email }}</div>
          </div>
        </v-card-text>
      </v-card>
    </NuxtLink>
  </div>
</template>

<script>
export default {
  name: 'Shop',
  data() {
    return {
      storeList: []
    };
  },
  // fetchOnServer: false,
  async fetch() {
    await this.getStoreList();
  },
  methods: {
    async getStoreList() {
      try {
        const res = await this.$api.post('/stores/getStoreListByLongLat', {});
        this.storeList = res;
      } catch (e) {
        console.log(e);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.shop {
  .shop-card {
    margin: 16px 12px;
    display: block;
  }

  .desc {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
  }
}
</style>
